<template>
  <el-dialog :title="'系数详细配置('+deptName+')'" :close-on-click-modal="false" :visible.sync="visible" :fullscreen="true">

    <el-popover placement="bottom" width="400" trigger="click" style="float: right" class="mb10">
      <el-col :span="12"><el-checkbox v-model="showList.show03">个人考核分级</el-checkbox></el-col>
      <el-col :span="12"><el-checkbox v-model="showList.show01">工时(工作量)奖励</el-checkbox></el-col>
      <el-col :span="12"><el-checkbox v-model="showList.show02">员工考核基础分</el-checkbox></el-col>
      <el-col :span="12"><el-checkbox v-model="showList.show04">员工月绩效考核分</el-checkbox></el-col>
      <el-col :span="12"><el-checkbox v-model="showList.show05">绩效年薪基数</el-checkbox></el-col>
      <el-col :span="12"><el-checkbox v-model="showList.show06">综合业绩分值</el-checkbox></el-col>
      <el-col :span="12"><el-checkbox v-model="showList.show07">绩效奖金基数</el-checkbox></el-col>
      <el-col :span="12"><el-checkbox v-model="showList.show08">个人绩效分数</el-checkbox></el-col>
      <el-col :span="12"><el-checkbox v-model="showList.show09">绩效分值指数</el-checkbox></el-col>
      <el-button slot="reference" type="primary">显示设置</el-button>
    </el-popover>
      <el-table :data="dataList" border stripe height="70vh" width="98%" v-loading="dataListLoading" ref="multipleTable" @selection-change="handleSelectionChange" :key="Math.random()" >
        <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>

        <el-table-column prop="ryCode" header-align="center" align="center" label="员工编号" min-width="100px"></el-table-column>
        <el-table-column prop="ryXm" header-align="center" align="center" label="姓名" min-width="80px"></el-table-column>
        <el-table-column prop="ryZwjbbh" header-align="center" align="center" label="岗位层级">
          <template slot-scope="scope">
            {{ zjzh(scope.row.ryZwjbbh) }}
          </template>
        </el-table-column>

        <el-table-column prop="config03" header-align="center" align="center" label="个人考核分级" min-width="150px" v-if="this.showList.show03">
          <template slot-scope="scope" >
<!--            <el-form :model="scope.row" :rules="rules" ref="dataForm">-->
<!--              <el-form-item prop="config03" :rules="{ required: true, message: '请选择个人考核分级'}">-->
                <el-select v-model="scope.row.config03" placeholder="请选择" class="xiaLa" style="width: 100px" @change="tongBu($event,'config03')">
                  <el-option v-for="(item,index) in lxOptions" :key="index" :label="item.label" :value="item.label"></el-option>
                </el-select>
<!--              </el-form-item>-->
<!--            </el-form>-->
          </template>
        </el-table-column>

        <el-table-column prop="config01" header-align="center" align="center" label="工时(工作量)奖励" min-width="180px" v-if="this.showList.show01">
          <template slot-scope="scope" >
            <el-input-number v-model="scope.row.config01" :precision="2" :step="1"  :min="0" @change="tongBu($event,'config01')"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="config02" header-align="center" align="center" label="员工考核基础分" min-width="180px" v-if="this.showList.show02">
          <template slot-scope="scope" >
            <el-input-number v-model="scope.row.config02" :precision="2" :step="1"  :min="0" @change="tongBu($event,'config02')"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="config04" header-align="center" align="center" label="员工月绩效考核分" min-width="180px" v-if="this.showList.show04">
          <template slot-scope="scope" >
            <el-input-number v-model="scope.row.config04" :precision="2" :step="1"  :min="0" @change="tongBu($event,'config04')"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="config05" header-align="center" align="center" label="绩效年薪基数" min-width="180px" v-if="this.showList.show05">
          <template slot-scope="scope" >
            <el-input-number v-model="scope.row.config05" :precision="2" :step="1"  :min="0" @change="tongBu($event,'config05')"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="config06" header-align="center" align="center" label="综合业绩分值" min-width="180px" v-if="this.showList.show06">
          <template slot-scope="scope" >
            <el-input-number v-model="scope.row.config06" :precision="2" :step="1"  :min="0" @change="tongBu($event,'config06')"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="config07" header-align="center" align="center" label="绩效奖金基数" min-width="180px" v-if="this.showList.show07">
          <template slot-scope="scope" >
            <el-input-number v-model="scope.row.config07" :precision="2" :step="1"  :min="0" @change="tongBu($event,'config07')"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="config08" header-align="center" align="center" label="个人绩效分数" min-width="180px" v-if="this.showList.show08">
          <template slot-scope="scope" >
            <el-input-number v-model="scope.row.config08" :precision="2" :step="1"  :min="0" @change="tongBu($event,'config08')"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="config09" header-align="center" align="center" label="绩效分值指数" min-width="180px" v-if="this.showList.show09">
          <template slot-scope="scope" >
            <el-input-number v-model="scope.row.config09" :precision="2" :step="1"  :min="0" @change="tongBu($event,'config09')"></el-input-number>
          </template>
        </el-table-column>
      </el-table>

    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                   :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                   layout="total, sizes, prev, pager, next, jumper" class="mt10">
    </el-pagination>
  <span slot="footer" class="dialog-footer">
     <!-- <el-button @click="allocationExport" type="primary" :disabled="exDisabled" plain>配置导出</el-button>
     <el-button @click="allocationImport" type="primary" plain>配置导入</el-button> -->
    <el-button type="primary" @click="btnConfirm()">保存</el-button>
    <el-button @click="visible=false" type="primary" plain>取消</el-button>
  </span>
    <!-- 配置导入 -->
    <impAllocation v-if="impAllocationVisible" ref="impAllocation" @refreshDataList="getDataList"></impAllocation>
  </el-dialog>
</template>

<script>
/*!
 * 系数详细配置
 *
 * @author lxl
 * @date 2021-9-7 09:08:39
 */
import {fetchListXsXxPzRyxx, allocationRyxxbXxPz} from '@/api/jiangjin/jiangjinryxxb'
import request from '@/router/axios'
import impAllocation from '../jiangjinryfzb/importAllocationS'
import {remote as remoteDict} from '@/api/admin/dict';

export default {
  components: {
    impAllocation
  },
  data(){
    return{
      visible:false,
      impAllocationVisible:false,
      exDisabled: false,
      dataList:[],
      dataListLoading:true,
      lxOptions: [
        {value: 'A',label: 'A' }, { value: 'B',label: 'B' },
        {value: 'C',label: 'C' }, { value: 'D',label: 'D' },
        // {label:'A1',value:'A1'},
        // {label:'B1',value:'B1'},
        // {label:'C1',value:'C1'},
        // {label:'D1',value:'D1'},
        // {label:'A2',value:'A2'},
        // {label:'B2',value:'B2'},
        // {label:'C2',value:'C2'},
        // {label:'D2',value:'D2'},
      ],
      multipleSelection: [],
      rules:{
        config03:[{ required: true, message: '请选择个人考核分级'}],
      },
      //翻页
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      deptId:'',
      deptName:'',
      userZjOptions: [], // 职级
      ryCodes:'',
      //列显示设置
      showList:{
        show01:true,
        show02:true,
        show03:true,
        show04:true,
        show05:true,
        show06:true,
        show07:true,
        show08:true,
        show09:true,
      }
    }
  },
  methods:{
    init(item){
      this.visible = true;
      this.deptId = item.deptId;
      this.deptName = item.deptName;
      this.ryCodes = item.ryCodes;
      // 获取人员职级代码
      remoteDict("user_zj").then(response => {
        this.userZjOptions = response.data.data
      })
      this.getDataList();

    },
    //职务级别转换
    zjzh(value) {

      for (var a in this.userZjOptions) {
        if (this.userZjOptions[a].value == value) {
          return this.userZjOptions[a].label;
        }
      }
    },
    // 获得数据
    getDataList(){
      this.dataListLoading = true;
      fetchListXsXxPzRyxx(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }),this.ryCodes)
        .then((res)=>{
          this.dataList = res.data.data.records
          this.totalPage = res.data.data.total
        })
      this.dataListLoading = false;
    },

    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },

    // 多选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 同步
    tongBu(event,id){
      for (let i in this.multipleSelection){
        this.multipleSelection[i][id]=event;
      }
    },
    // 保存
    btnConfirm(){
      allocationRyxxbXxPz(this.dataList)
        .then(res=>{
        this.$notify.closeAll();
        this.$notify.success('修改成功');
        this.visible = false;
      })
        .catch(() => {

      })
    },
    allocationImport(){
      this.impAllocationVisible = true;
      this.$nextTick(() => {
        this.$refs.impAllocation.init(this.deptId)
      })

    },

    allocationExport(){
      const filename = "个人信息基本配置";
      this.exDisabled = true;

      return request({
        url: '/jiangjin/jiangjinryxxb/exportRyFzPz/'+this.deptId,
        method: 'get',
        responseType: 'arraybuffer'
      })
        .then((response) => { // 处理返回的文件流
        const blob = new Blob([response.data], {
          type: 'application/vnd.ms-excel'
        })
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = filename
        document.body.appendChild(link)
        link.click()
        window.setTimeout(function () {
          URL.revokeObjectURL(blob)
          document.body.removeChild(link)
        }, 0)

          this.exDisabled = false;
      })
        .catch(err =>{
          this.exDisabled = false;
        })
    },

  }
}
</script>

<style scoped>

</style>
